﻿<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>用户中心</title>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
<link title="" href="css/style.css" rel="stylesheet" type="text/css"  />
<link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css"/>
<link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled"/>
<link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled"/>
<link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />
<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/jquery.cookie.js" type="text/javascript"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
</head>

<body>
<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
  <div class="navbar-header">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand mystyle-brand"><span class="glyphicon glyphicon-home"></span></a> </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="li-border"><a class="mystyle-color" href="#">AKB管理系统</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
      <li class="dropdown"><a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">换肤<span class="caret"></span></a>
        <ul class="dropdown-menu changecolor">
          <li id="blue"><a href="#">蓝色</a></li>
          <li class="divider"></li>
          <li id="green"><a href="#">绿色</a></li>
          <li class="divider"></li>
          <li id="orange"><a href="#">橙色</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
<div class="down-main">
    <form @submit.prevent="checkForm" class="flrg login_box">
        <h3>登录</h3>
        <div class="a">
            <input v-on:input='keyFn($event)' v-model="phone" name="phone" type="text" class="in-1 form-control" placeholder="请输入手机号">
        </div>
        <div class="a">
            <input v-on:input='keyFn($event)' v-model="password" name="password" type="password" class="in-1 form-control" placeholder="请输入密码">
        </div>
        <div class="a code">
            <input style="margin-right: 10px;" type="text" id="valid_code" class="in-1 form-control" v-model="code" placeholder="请输入验证码"/>
            <button id="generate_code" class="reg_ver_but form-control" :disabled="isDisabled" @click.prevent="sendCode">{{generate_code}}</button>
        </div>
        <div class="a">
            <!--<a href="identify.html" class="continue text-big">登录</a>-->
            <input v-on:input='keyFn($event)' type="submit" value="登录" class="continue text-big"/>
        </div>
        <div class="a">
            <div class="hr"></div>
        </div>
    </form>
</div>
<script type="text/javascript">
    Vue.prototype.keyFn = function(event){
        var el = event.currentTarget;
        if($(el).hasClass('error')) {
            $(el).removeClass('error');
        }
    };


    var vm = new Vue({
        el:'.login_box',
        data:{
            phone:null,
            password:null,
            isDisabled:false,
            generate_code:'发送验证码',
            nums:60,
            clock:null,
            code:null
        },

        methods:{
            checkTel:function(){
                if(this.phone === null){
                    $("[name='phone']").addClass('error').focus();
                    alert("手机号码不能为空");
                    return false;
                }else if(!this.phone.match(/^1[34578]\d{9}$/)){
                    $("[name='phone']").addClass('error').focus();
                    alert("手机号码有误，请重填");
                    return false;
                }
                return true;
            },
            checkPassword:function(){
                if(this.password === null){
                    $("[name='password']").addClass('error').focus();
                    alert("密码不能为空");
                    return false;
                }
                return true;
            },
            doLoop:function(){
                this.nums--;
                if (this.nums > 0) {
                    this.isDisabled = true;
                    this.generate_code = this.nums + " S";
                } else {
                    clearInterval(this.clock); //清除js定时器
                    this.isDisabled = false;
                    this.generate_code = '发送验证码';
                    this.nums = 60; //重置时间
                }
            },
            sendCode:function(){
                if(this.isDisabled){
                    return false;
                }else{
                    if(!this.checkTel()){ return false;}
                    this.$http.post('/akb_miner_server/cbt/sendPhoneMsg',
                        {
                            phone:this.phone,
                            type:1
                        },
                        {
                            emulateJSON:true
                        }).then(function(res){
                            console.log(res);
                            var bodyText = JSON.parse(res.bodyText);
                            // console.log(bodyText.data);
                            // console.log(bodyText.code);
                            //判断是否成功
                            if (bodyText.code !== 100) {
                                alert(bodyText.message);
                            } else {
                                this.isDisabled = true;
                                this.generate_code = this.nums + " S";
                                this.clock = setInterval(this.doLoop, 1000); //一秒执行一次
                            }
                        },function(err) {
                            console.log(err);
                        })
                }
            },
            checkForm:function () {
                if(!this.checkTel()){ return false;}
                if(!this.checkPassword()){ return false;}

                this.$http.post('/akb_miner_server/cbt/admin/login',
                    {
                        phone:this.phone,
                        passWord:this.password,
                        code:this.code
                    },
                    {
                        emulateJSON:true
                    }).then(function(res){
                    console.log(res);
                    var bodyText = JSON.parse(res.bodyText);

                    if(bodyText.code == 100){
                        console.log('成功');
                        var userid_token = bodyText.data.userId + '_' + bodyText.data.token;
                        console.log(userid_token);
                        $.cookie('authorization',userid_token);


                        window.location.href = 'identify.html'
                    }
                },function(err) {
                    console.log(err);
                });

            }
        }
    });

$(function(){
/*换肤*/
$(".dropdown .changecolor li").click(function(){
	var style = $(this).attr("id");
    $("link[title!='']").attr("disabled","disabled");
	$("link[title='"+style+"']").removeAttr("disabled");

	$.cookie('mystyle', style, { expires: 7 }); // 存储一个带7天期限的 cookie
})
var cookie_style = $.cookie("mystyle");
if(cookie_style!=null){
    $("link[title!='']").attr("disabled","disabled");
	$("link[title='"+cookie_style+"']").removeAttr("disabled");
}
/*左侧导航栏显示隐藏功能*/
$(".subNav").click(function(){
			/*显示*/
			if($(this).find("span:first-child").attr('class')=="title-icon glyphicon glyphicon-chevron-down")
			{
				$(this).find("span:first-child").removeClass("glyphicon-chevron-down");
			    $(this).find("span:first-child").addClass("glyphicon-chevron-up");
			    $(this).removeClass("sublist-down");
				$(this).addClass("sublist-up");
			}
			/*隐藏*/
			else
			{
				$(this).find("span:first-child").removeClass("glyphicon-chevron-up");
				$(this).find("span:first-child").addClass("glyphicon-chevron-down");
				$(this).removeClass("sublist-up");
				$(this).addClass("sublist-down");
			}
		// 修改数字控制速度， slideUp(500)控制卷起速度
	    $(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(300);
	})
/*左侧导航栏缩进功能*/
$(".left-main .sidebar-fold").click(function(){

	if($(this).parent().attr('class')=="left-main left-full")
	{
		$(this).parent().removeClass("left-full");
		$(this).parent().addClass("left-off");

		$(this).parent().parent().find(".right-product").removeClass("right-full");
		$(this).parent().parent().find(".right-product").addClass("right-off");

		}
	else
	{
		$(this).parent().removeClass("left-off");
		$(this).parent().addClass("left-full");

		$(this).parent().parent().find(".right-product").removeClass("right-off");
		$(this).parent().parent().find(".right-product").addClass("right-full");

		}
	})

  /*左侧鼠标移入提示功能*/
		$(".sBox ul li").mouseenter(function(){
			if($(this).find("span:last-child").css("display")=="none")
			{$(this).find("div").show();}
			}).mouseleave(function(){$(this).find("div").hide();})
})
</script>
</body>
</html>
